<template>

  <!--
    el-tree
       show-checkbox:是否显示多选框
       check-strictly:是否遵循父子互相关联

       默认展开和默认选中
         1.设置 node-key=[属性]
         2.默认选中：:default-checked-keys=[填写需要默认选中的值]
           根据上面node-key填写的属性写值
         3.默认展开 default-expanded-keys="[值]"

       获取选中中的值
         1.绑定ref，在调用对应的方法即可 getCheckedKeys()
         2.方法一般是通过ref调用
-->

  <div>
    <el-tree
      ref="tree"
      :data="list"
      :props="{ label: 'city' }"
      show-checkbox
      check-strictly
      node-key="city"
      :default-checked-keys="['深圳','广州']"
      :default-expanded-keys="['深圳']"
    />

    <el-button @click="getCheckedKeys()">通过 key 获取</el-button>
  </div>
</template>

<script>
export default {

  data() {
    return {
      list: [
        {
          id: 1,
          city: '深圳',
          children: [
            {
              id: 2,
              city: '保安'
            }
          ]
        },
        {
          id: 3,
          city: '广州'
        }
      ]
    }
  },
  methods: {
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys())
    }
  }

}
</script>

<style></style>
